@import '../middleware/Theme/constants';


.fixedHeaderSpacer {
	// Counteracts height of fixed position Header
	height: 4.5rem;

	@media (min-width: @min-medium-screen) {
		height: 5.5rem;
	}
}

.Header {
	display: table;
	width: 100%;
	color: #585858;
	background: white;
	border-bottom: 1px solid @border-color;

	.route-homepage & {
		.light-gray-to-black-background-color-gradient();
		color: @almost-white;
		text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
		border-bottom: 0;

		.header-nav a {
			color: inherit;
			&:hover {
				color: white;
			}
		}
		.active a {
			color: white;
		}
	}

	& > * {
		display: table-cell;
	}

	.header-logo {
		padding: 1.25rem;

		color: inherit;
		font-weight: 900;
		font-size: 1rem;
		text-decoration: none;

		svg {
			height: 2rem;
			margin-right: 1rem;
			vertical-align: middle;
			fill: currentColor;
		}

		@media (min-width: @min-medium-screen) {
			padding: 1.25rem 2.5rem;
			font-size: 2rem;

			svg {
				height: 3rem;
			}
		}

	}

	.mobileToggle {
		padding: 1.25rem;
		text-align: right;

		@media (min-width: @min-medium-screen) {
			display: none;
		}

		svg {
			height: 1.5rem;
			fill: currentColor;
			vertical-align: middle;
		}
	}

	@max-small-screen: (@min-medium-screen - 1);
	&.menuOpen {
		color: #585858;

		.header-logo,
		.mobileToggle {
			position: relative;
			z-index: 9;
		}

		.header-nav {
			display: block;

			@media (max-width: @max-small-screen) {
				position: fixed;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
				padding: 5rem 0 0 0;

				color: @font-color;
				background: white;
				text-align: left;

				li {
					a,
					a:active {
						border-left: 0.25rem solid transparent;
						border-bottom: 0;
						padding: 1rem;
						display: block;
					}

					&.active a {
						border-color: @active-color;
					}
				}
			}
		}
	}

	.header-nav {
		display: none; // Override on small screens

		padding: 0 2.5rem;
		text-align: right;
		vertical-align: middle;

		@media (min-width: @min-medium-screen) {
			display: table-cell;

			ul,
			li,
			a {
				display: inline-block;
				height: 100%;
			}
		}

		ul,
		li {
			padding: 0;
			margin: 0;
		}

		a {
			padding: 2.0rem 1.0rem 1.75rem 1.0rem;
			color: #727272;
			height: 100%;
			box-sizing: border-box;
			border-bottom: 0.25rem solid transparent;
			text-decoration: none;

			&:hover {
				color: #333333;
				border-color: transparent;
			}
		}

		.active a,
		.active a:hover {
			border-color: @active-color;
			color: #333333;
		}
	}
}
